<meta charset="utf-8">
<style id="fontfaces">
</style>
<body>
<script>
function getFontsWithTestCharsForOS() {
  if (navigator.userAgent.indexOf("Android") !== -1) {
    // Intersection of available fonts of Android Kitkat to Oreo that kept the
    // same family names to compare against for these postscript or full font
    // names. (RobotoThin* and RobotoLight* had differing family names on
    // different Android versions.
    return [
      ["AndroidClock-Regular", "0"],
      ["Roboto-Bold", "0"],
      ["DroidSansMono", "0"],
      ["Roboto-Regular", "0"],
      ["Noto Color Emoji", "☺"],
      ["NotoSansBengali-Bold", "0"],
      ["NotoSansBengaliUI-Bold", "0"],
      ["NotoSansDevanagari-Bold", "0"],
      ["NotoSansDevanagariUI-Bold", "0"],
      ["NotoSansKannada-Bold", "0"],
      ["NotoSansKannada", "0"],
      ["NotoSansKannadaUI-Bold", "0"],
      ["NotoSansKannadaUI", "0"],
      ["NotoSansLao-Bold", "0"],
      ["NotoSansLao", "0"],
      ["NotoSansLaoUI-Bold", "0"],
      ["NotoSansLaoUI", "0"],
      ["NotoSansMalayalam-Bold", "0"],
      ["NotoSansMalayalamUI-Bold", "0"],
      ["NotoSansTamil-Bold", "0"],
      ["NotoSansTamilUI-Bold", "0"],
      ["NotoSansTelugu-Bold", "0"],
      ["NotoSansTelugu", "0"],
      ["NotoSansTeluguUI-Bold", "0"],
      ["NotoSansTeluguUI", "0"],
      ["NotoSansThai-Bold", "๐"],
      ["NotoSansThai", "๐"],
      ["NotoSansThaiUI-Bold", "๐"],
      ["NotoSansThaiUI", "๐"],
      ["Roboto-BoldItalic", "0"],
      ["RobotoCondensed-BoldItalic", "0"],
      ["RobotoCondensed-Bold", "0"],
      ["RobotoCondensed-Italic", "0"],
      ["RobotoCondensed-Regular", "0"],
      ["Roboto-Italic", "0"],
    ];
  } else if (navigator.userAgent.indexOf("Linux") !== -1
             || navigator.userAgent.indexOf("CrOS") !== -1) {
    return [
      ["Ahem", "0"],
      ["Arimo-Bold", "0"],
      ["Arimo-BoldItalic", "0"],
      ["Arimo-Italic", "0"],
      ["Arimo-Regular", "0"],
      ["Cousine-Bold", "0"],
      ["Cousine-BoldItalic", "0"],
      ["Cousine-Italic", "0"],
      ["Cousine-Regular", "0"],
      ["DejaVuSans", "0"],
      ["DejaVuSans-Bold", "0"],
      ["Garuda", "0"],
      ["Gelasio-Bold", "0"],
      ["Gelasio-BoldItalic", "0"],
      ["Gelasio-Italic", "0"],
      ["Gelasio-Regular", "0"],
      ["Lohit-Devanagari", "0"],
      ["Lohit-Gurmukhi", "0"],
      ["Lohit-Tamil", "0"],
      ["NotoSansKhmer-Regular", "០"],
      ["Tinos-Bold", "0"],
      ["Tinos-BoldItalic", "0"],
      ["Tinos-Italic", "0"],
      ["Tinos-Regular", "0"],
      ["muktinarrow", "0"],
      ["Tinos-Regular", "0"]
    ];
  } else if (navigator.userAgent.indexOf("Macintosh") !== -1) {
    return [
      [ "AmericanTypewriter-CondensedLight", "0" ],
      [ "ArialNarrow-BoldItalic", "0" ],
      [ "Baskerville-SemiBoldItalic", "0" ],
      [ "DevanagariMT", "0" ],
      [ "DINAlternate-Bold", "0" ],
      [ "GillSans-LightItalic", "0" ],
      [ "IowanOldStyle-Titling", "0" ],
      [ "MalayalamSangamMN", "0" ],
      [ "HiraMaruPro-W4", "0" ],
      [ "HiraKakuStdN-W8", "0" ],
    ];
  } else if (navigator.userAgent.indexOf("Windows") !== -1) {
    return [
      ["CambriaMath", "0"],
      ["Ming-Lt-HKSCS-ExtB", "0"],
      ["NSimSun", "0"],
      ["calibri-bolditalic", "0"]
      ];
  }
  return [];
}

function stripSpaces(fontName) {
  return fontName.replace(/\s+/g, '');
}

async function addTestNodes() {
  var containerDiv = document.createElement("div");
  var fontFaceDeclarations = "";
    for (font_name_and_testchars of getFontsWithTestCharsForOS()) {
    var font_name = font_name_and_testchars[0];
    // Add cursive to font stack to avoid ignoring failures when Roboto is used as fallback.
    fontFaceDeclarations +=
      `@font-face { font-family: ${stripSpaces(font_name)}_webfont; \
      src: local("${font_name}"); } .${stripSpaces(font_name)}_style \
      { font-family: ${stripSpaces(font_name)}_webfont, cursive; } `;
    var testElement = document.createElement("div");
    testElement.classList += `testnode ${stripSpaces(font_name)}_style`;
    testElement.innerText = font_name_and_testchars[1];
    containerDiv.appendChild(testElement);
  }
  fontfaces.innerText = fontFaceDeclarations;
  document.body.appendChild(containerDiv);
  await document.fonts.ready;
  // Force layout so that the DevTools side of the test can start accessing
  // nodes' font information reliably.
  document.body.offsetTop;
  return containerDiv.children.length;
}
</script>
